<template>
    <div>
        <el-card>
            <el-form :inline="true" :disabled="scene == 1"> 
                <el-form-item label="一级分类">
                    <!--el-select有了v-model后才能手动选中下拉框的选项-->
                    <el-select v-model="categoryStore.c1Id" @change="handler">
                        <el-option v-for="c1 in categoryStore.c1Arr" :key="c1.id" :label="c1.name" :value="c1.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类">
                    <el-select v-model="categoryStore.c2Id" @change="handler1">
                        <el-option v-for="c2 in categoryStore.c2Arr" :key="c2.id" :label="c2.name" :value="c2.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="三级分类">
                    <el-select v-model="categoryStore.c3Id">
                        <el-option v-for="c3 in categoryStore.c3Arr" :key="c3.id" :label="c3.name" :value="c3.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
        
    </div>
</template>

<script setup lang="ts">
//引入分类接口方法

import { onMounted } from 'vue';
import useCategoryStore from '@/store/modules/category'


let categoryStore = useCategoryStore()

onMounted(() => {
    categoryStore.getC1()
})

const handler = () => {
    //需要清空二三级分类数据
    categoryStore.c2Id = ''
    categoryStore.c2Arr = []
    categoryStore.c3Id = ''
    categoryStore.c3Arr = []
    //获取二级分类数据
    categoryStore.getC2()
}

const handler1 = () => {
    //需要清空三级分类数据
    categoryStore.c3Id = ''
    categoryStore.c3Arr = []
    //获取三级分类数据
    categoryStore.getC3()
}

//接受父组件传递过来的scene
defineProps(['scene'])

</script>

<style scoped>
.el-select {
    width: 200px;
}
</style>